<template>
  <div class="box-border w-full h-full px-4">
    <div class="rounded-md border_blue !border-blue-500 w-32 flex items-center justify-center px-2">
      清管器运行设置
    </div>
    <div class="w-full mt-2 text-base">
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="wb_qgq_lineChecked" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="wb_qgq_lineChecked" class="w-full mt-2 text-base">
          <div class="flex items-center gap-4">
            <span class="w-[160px] text-right">清管器速度滑移系数 </span>
            <el-input v-model="wb_SLIP" class="!w-[160px]" />
          </div>
          <div class="flex items-center gap-4 mt-2">
            <span class="w-[160px] text-right">清管器发送时间 </span>
            <el-input v-model="wb_QGX_time" class="!w-[160px]" />
            <span class="ml-2">min</span>
          </div>
        </div>
      </div>
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="bk_qgq_lineChecked" class="mr-2">百克线</el-checkbox>
        </div>
        <div v-show="bk_qgq_lineChecked" class="w-full mt-2 text-base">
          <div class="flex items-center gap-4">
            <span class="w-[160px] text-right">清管器速度滑移系数 </span>
            <el-input v-model="bk_SLIP" class="!w-[160px]" />
          </div>
          <div class="flex items-center gap-4 mt-2">
            <span class="w-[160px] text-right">清管器发送时间 </span>
            <el-input v-model="bk_QGX_time" class="!w-[160px]" />
            <span class="ml-2">min</span>
          </div>
        </div>
      </div>
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="ty_qgq_lineChecked" class="mr-2">调油一线</el-checkbox>
        </div>
        <div v-show="ty_qgq_lineChecked" class="w-full mt-2 text-base">
          <div class="flex items-center gap-4">
            <span class="w-[160px] text-right">清管器速度滑移系数 </span>
            <el-input v-model="ty_SLIP" class="!w-[160px]" />
          </div>
          <div class="flex items-center gap-4 mt-2">
            <span class="w-[160px] text-right">清管器发送时间 </span>
            <el-input v-model="ty_QGX_time" class="!w-[160px]" />
            <span class="ml-2">min</span>
          </div>
        </div>
      </div>
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="new81_qgq_lineChecked" class="mr-2">新81#线</el-checkbox>
        </div>
        <div v-show="new81_qgq_lineChecked" class="w-full mt-2 text-base">
          <div class="flex items-center gap-4">
            <span class="w-[160px] text-right">清管器速度滑移系数 </span>
            <el-input v-model="new81_SLIP" class="!w-[160px]" />
          </div>
          <div class="flex items-center gap-4 mt-2">
            <span class="w-[160px] text-right">清管器发送时间 </span>
            <el-input v-model="new81_QGX_time" class="!w-[160px]" />
            <span class="ml-2">min</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oilList: { type: Array }
})
// 响应式数据
const wb_qgq_lineChecked = ref(false)
const bk_qgq_lineChecked = ref(false)
const ty_qgq_lineChecked = ref(false)
const new81_qgq_lineChecked = ref(false)

const wb_SLIP = ref('0.05')
const wb_QGX_time = ref('120')
const bk_SLIP = ref('0.05')
const bk_QGX_time = ref('180')
const ty_SLIP = ref('0.05')
const ty_QGX_time = ref('240')
const new81_SLIP = ref('0.05')
const new81_QGX_time = ref('300')

const validateSettings = () => {
  // 至少选择一条管线进行清管器运行
  if (
    !wb_qgq_lineChecked.value &&
    !bk_qgq_lineChecked.value &&
    !ty_qgq_lineChecked.value &&
    !new81_qgq_lineChecked.value
  ) {
    ElMessage.error('请至少选择一条管线进行清管器运行')
    return false
  }

  // 乌百线清管器校验
  if (wb_qgq_lineChecked.value) {
    if (!wb_SLIP.value) {
      ElMessage.error('乌百线清管器速度滑移系数不能为空')
      return false
    }
    if (!wb_QGX_time.value) {
      ElMessage.error('乌百线清管器发送时间不能为空')
      return false
    }
  }

  // 百克线清管器校验
  if (bk_qgq_lineChecked.value) {
    if (!bk_SLIP.value) {
      ElMessage.error('百克线清管器速度滑移系数不能为空')
      return false
    }
    if (!bk_QGX_time.value) {
      ElMessage.error('百克线清管器发送时间不能为空')
      return false
    }
  }

  // 调油一线清管器校验
  if (ty_qgq_lineChecked.value) {
    if (!ty_SLIP.value) {
      ElMessage.error('调油一线清管器速度滑移系数不能为空')
      return false
    }
    if (!ty_QGX_time.value) {
      ElMessage.error('调油一线清管器发送时间不能为空')
      return false
    }
  }

  // 新81#线清管器校验
  if (new81_qgq_lineChecked.value) {
    if (!new81_SLIP.value) {
      ElMessage.error('新81#线清管器速度滑移系数不能为空')
      return false
    }
    if (!new81_QGX_time.value) {
      ElMessage.error('新81#线清管器发送时间不能为空')
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  // 乌百线清管器校验
  if (wb_qgq_lineChecked.value) {
    if (!wb_SLIP.value || !wb_QGX_time.value) {
      return false
    }
  }

  // 百克线清管器校验
  if (bk_qgq_lineChecked.value) {
    if (!bk_SLIP.value || !bk_QGX_time.value) {
      return false
    }
  }

  // 调油一线清管器校验
  if (ty_qgq_lineChecked.value) {
    if (!ty_SLIP.value || !ty_QGX_time.value) {
      return false
    }
  }

  // 新81#线清管器校验
  if (new81_qgq_lineChecked.value) {
    if (!new81_SLIP.value || !new81_QGX_time.value) {
      return false
    }
  }

  // 至少选择一条管线进行清管器运行
  if (
    !wb_qgq_lineChecked.value &&
    !bk_qgq_lineChecked.value &&
    !ty_qgq_lineChecked.value &&
    !new81_qgq_lineChecked.value
  ) {
    return false
  }

  return true
})

const getParamsData = () => {
  return {
    M_1: wb_qgq_lineChecked.value ? '1' : '0',
    M_2: bk_qgq_lineChecked.value ? '1' : '0',
    M_3: ty_qgq_lineChecked.value ? '1' : '0',
    M_4: new81_qgq_lineChecked.value ? '1' : '0',
    SLIP_1: wb_SLIP.value,
    SLIP_2: bk_SLIP.value,
    SLIP_3: ty_SLIP.value,
    SLIP_4: new81_SLIP.value,
    TIME_1: wb_QGX_time.value,
    TIME_2: bk_QGX_time.value,
    TIME_3: ty_QGX_time.value,
    TIME_4: new81_QGX_time.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style scoped>
.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
